import React from 'react'
import {HashRouter,Route,Switch,Link,BrowserRouter} from 'react-router-dom'
import classic from './book/classic'
import Success from './book/success'
import Emery   from './book/emeryic'
import More    from './book/more'
import Culture from './book/culture'
import a from '../img/img/1.jpg'
import b from '../img/img/2.jpg'
import c from '../img/img/4.jpg'
import d from '../img/img/7.jpg'
import e from '../img/img/8.jpg'
import f from '../img/img/9.jpg'
import ch from '../img/img/ch.jpg'
import {Row,Col,Button, Breadcrumb,
   Dropdown,Menu, Pagination, Steps,
    PageHeader, BackTop, Progress, 
    Tooltip, Timeline,Tag, Tabs,
     Badge, Input, Select, Carousel,
      Collapse, Descriptions,Rate, notification, TimePicker, DatePicker, Popconfirm,message, Drawer, Popover} from 'antd'
import {UserOutlined,DownOutlined,BookOutlined,SearchOutlined} from '@ant-design/icons'
const Option = Select.Option
const {Panel}=Collapse
const {TabPane}=Tabs
import Router from '../router/index'
function cancel(e) {
  console.log(e);
  message.error('Click on No');
}
class Shou extends React.Component
{
  constructor(){
    super()
    this.state={
      vis:true
    }
  }
  componentDidMount(){
    message.info('hello')
  }
  click(){
    notification.open({
      message: 'Notification Title',
      description:
        'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
      onClick: () => {
        console.log('Notification Clicked!');
      },
    })
  }
  
  render(){
    return (
      <div>
        <header>
        
        <Row>
          <Col span={6}>
              <h3> <BookOutlined/> 安静书院</h3>
          </Col>
          <Col span={12}>
              <Row>
                <Col span={12}>
                <Tag>首页</Tag>
              <Tag>分类</Tag>
              <Tag>排行</Tag>
              <Badge count={100}><Tag>征文大赛</Tag></Badge>
                </Col>
                <Col span={12}>
               <Row>
                 <Col span={16}>
                 <Input size="small"
                addonBefore={
                  <Select defaultValue="lucy">
      <Option value="jack">Jack</Option>
      <Option value="lucy">Lucy</Option>
      <Option value="disabled" disabled>
        Disabled
      </Option>
      <Option value="Yiminghe">yiminghe</Option>
    </Select>
                }
                addonAfter={<SearchOutlined/>}></Input>
                 </Col>
                 <Col span={8}>
                  <a href="#">登录</a>
                  <a href="#">注册</a>
                 </Col>
               </Row>
                
                </Col>
              </Row>
             
          </Col>
        </Row>
      </header>
      <Row>
        <Col span={24}>
        <Carousel autoplay effect="fade">
          <div>
          <Row>
            <Col span={6}>
              <img src={a}/>
            </Col>
            <Col span={6}>
            <img src={b}/>
            </Col>
            <Col span={6}>
            <img src={c}/>
            </Col>
            <Col span={6}>
            <img src={d}/>
            </Col>
          </Row>
          </div>
          <div>
          <Row>
            <Col span={6}>
              <img src={e}/>
            </Col>
            <Col span={6}>
            <img src={b}/>
            </Col>
            <Col span={6}>
            <img src={f}/>
            </Col>
            <Col span={6}>
            <img src={d}/>
            </Col>
          </Row>
          </div>
        </Carousel>
        </Col>
      </Row>
      <h2 style={{textAlign:"center"}}>出版图书</h2>
                <Row>
                  <Col span={8}>
                     <Row>
                       <Col span={24}>
                       <p>
                        <Tag color="red">重点推荐</Tag>
                      </p>
                      <p><BookOutlined/><strong>橙红年代：屌丝逆袭现代都市</strong></p>
                      <p><UserOutlined/>作者：骁骑校</p>
                      <p>
                        一个小贩历经八年血与火考验沾满硝烟气息回到花花都市
                      </p>
                       </Col>
                     </Row>
                     <Row>
                       <Col span={12}>
                         <img src={ch}/>
                         <Rate character="a" allowHalf defaultValue={1.5} onChange={(x)=>{
                           console.log(x)
                         }}/>
                         <Button onClick={this.click.bind(this)}>推荐新书</Button>
                         <TimePicker onClick={x=>{
                           console.log(x)
                         }}></TimePicker>
                         <DatePicker onChange={(data,str)=>{
                           console.log(data+','+str)
                         }}></DatePicker>
                         <Drawer
                         title="hell"
                         placement="right"
                         closable={true}
        onClose={()=>{message.info('嗯嗯'); this.setState({vis:false})}}
        visible={this.state.vis}
                         >asasa</Drawer>
                        <Popconfirm
    title="Are you sure delete this task?"
    onConfirm={()=>{
      message.error('error')
    }}
    onCancel={cancel}
    okText="Yes"
    cancelText="No"
  >
    <a href="#">Delete</a>
  </Popconfirm>
                       </Col>
                     </Row>
                  </Col>
                  <Col span={8}>
                     <BrowserRouter>
                     <Row>
                       <Col span={24}>
                       <Breadcrumb>
                      <Breadcrumb.Item><Link to="/">小说</Link></Breadcrumb.Item>
                      <Breadcrumb.Item><Link to="/success">励志成功学</Link></Breadcrumb.Item>
                      <Breadcrumb.Item><Link to="/culture">文学</Link></Breadcrumb.Item>
                      <Breadcrumb.Item><Link to="/emery">经济管理</Link></Breadcrumb.Item>
                      <Breadcrumb.Item><Link to="/more">更多</Link></Breadcrumb.Item>
                      </Breadcrumb>
                       </Col>
                       <Col span={24}>
                              <Switch>
                                
                                <Route exact path="/" component={classic}></Route>
                                <Route  path="/success" component={Success}/>
                                <Route  path="/culture" component={Culture}/>
                                <Route  path="/emery" component={Emery}/>  
                                <Route  path="/more" component={More}/>   
                              </Switch>
                       </Col>
                     </Row>
                     </BrowserRouter>
                  </Col>
                  <Col span={8}>

                    <Row>
                      <Col span={24}>
                          <Collapse defaultActiveKey={['1','2','3']}>
                                <Panel key="1">
                                      <p>hello world</p>
                                </Panel>
                                <Panel key="2">
                                <p>hello app</p>
                                </Panel>
                                <Panel key="3">
                                <p>hello yes</p>
                                </Panel>
                          </Collapse>
                      </Col>
                    </Row>
                  </Col>
                </Row>

                <footer>
                  <Row>
                    <Col span={24}>
                    <Descriptions title="作者">
    <Descriptions.Item label="UserName">刘勇</Descriptions.Item>
    <Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
    <Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item>
    <Descriptions.Item label="Remark">empty</Descriptions.Item>
    <Descriptions.Item label="Address">
      No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
    </Descriptions.Item>
  </Descriptions>   
                    </Col>
                  </Row>
                </footer>
                <BackTop><Popover content={(<div>qwe</div>)} title="hello"><Button color="primary">点击</Button></Popover></BackTop>
      </div>
    )
  }
}
export default Shou